<template>
  <el-dialog :model-value="dialogVisible" :z-index="1000" :title="title" :before-close="handleClose" width="700px" draggable>
    <div class="doorRights" v-loading="loading">
      <ProTable
        ref="proTable"
        title="门禁点权限列表"
        rowKey="doorsn"
        :columns="columns"
        :request-api="getTableList"
        :data-callback="dataCallback"
        :tool-button="false"
        :search-col="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 2 }"
        :small="true"
        v-if="columns.length"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <el-button type="primary" text :icon="CirclePlus" @click="openDialog">增加</el-button>
          <el-button type="danger" text :icon="Delete" @click="_batchDel(scope.selectedListIds)">删除</el-button>
        </template>
        <!-- Expand -->
        <template #expand="scope">
          {{ scope.row }}
        </template>
      </ProTable>
    </div>
    <DoorTableDialog :optId="optId" :dialogVisible="dialogVisible1" :title="title" :handleClose="closeDialog" />
  </el-dialog>
</template>

<script setup lang="ts" name="DoorRightsDialog">
import { ElMessage } from "element-plus";
import { ref, watch } from "vue";
import { getDoorRightsList, delDoorRights, getDoorAreaList } from "@/api/modules/user";
import ProTable from "@/components/ProTable/index.vue";
import DoorTableDialog from "./DoorTableDialog.vue";
import { CirclePlus, Delete } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";

const proTable = ref();
const loading = ref(false);
const dialogVisible1 = ref(false);
const areaSelList = ref([]);
const columns: any = ref([]);

const dataCallback = (data: any) => {
  const { records, page } = data;
  loading.value = false;
  return {
    list: records,
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getDoorRightsList({ ...newParams, optid: props.optId, optHas: true });
};

// 批量删除门禁点信息
const _batchDel = async (selectedListIds: string[]) => {
  if (!selectedListIds.length) {
    ElMessage.error("请选择门禁点");
    return false;
  }
  await useHandleData(delDoorRights, { id: props.optId, list: selectedListIds }, `删除所选门禁点`);
  proTable.value.clearSelection();
  proTable.value.reset();
};

/**
 * 增加门禁点
 */
const openDialog = async () => {
  dialogVisible1.value = true;
};

const closeDialog = () => {
  dialogVisible1.value = false;
  proTable.value.getTableList();
};

/**
 * 获取门禁区域选择下拉列表
 */
const getDoorAreaData = async () => {
  try {
    const res = await getDoorAreaList();
    areaSelList.value = res.data.map(item => {
      return {
        label: item.value,
        value: item.key
      };
    });
    areaSelList.value.unshift({
      label: "全部",
      value: ""
    });
    columns.value = [
      { type: "selection", fixed: "left", width: 60 },
      {
        prop: "areaId",
        label: "区域",
        isShow: false,
        enum: areaSelList.value,
        search: {
          el: "select",
          defaultValue: areaSelList.value.length ? areaSelList.value[0].value : ""
        },
        width: 120
      },
      {
        prop: "clause",
        label: "门禁点编码",
        isShow: false,
        search: { el: "input" }
      },

      {
        prop: "areaName",
        label: "区域"
      },
      {
        prop: "doorname",
        label: "门禁点编码"
      }
    ];
  } catch (error) {
    columns.value = [
      { type: "selection", fixed: "left", width: 60 },
      {
        prop: "clause",
        label: "门禁点编码",
        isShow: false,
        search: { el: "input" }
      },

      {
        prop: "areaName",
        label: "区域"
      },
      {
        prop: "doorname",
        label: "门禁点编码"
      }
    ];
    console.log(error);
  }
};

const props = defineProps<{
  dialogVisible: boolean;
  title: string;
  handleClose: () => void;
  optId: string;
}>();

watch(
  () => props.dialogVisible,
  nV => {
    if (nV) getDoorAreaData();
  }
);
</script>
<style lang="scss" scoped>
.doorRights {
  height: 80vh;
  overflow-y: auto;
}
</style>
